<template>
  <div id="app-body">
    <el-card shadow="always">
      <!-- 查询关键字 -->
      <el-form :inline="true" :model="keyWords" class="demo-form-inline" size="small">
        <el-form-item label="员工姓名">
          <el-input v-model="keyWords.ename" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item label="所在城市">
          <el-input v-model="keyWords.city" placeholder="城市"></el-input>
        </el-form-item>
        <el-form-item label="最少工资">
          <el-input v-model="keyWords.minSalary" placeholder="最少"></el-input>
        </el-form-item>
        <el-form-item label="最多工资">
          <el-input v-model="keyWords.maxSalary" placeholder="最大"></el-input>
        </el-form-item>
        <el-form-item label="所在部门">
          <el-select v-model="keyWords.did" placeholder="部门">
            <el-option label="全部部门" value=""></el-option>
            <el-option
              v-for="d in deptList"
              :label="d.dname"
              :value="d.did"
              :key="d.did"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchEmp(1)" plain="">查询</el-button>
          <el-button type="success" @click="addEmp" plain="">添加</el-button>
          <el-button type="danger" @click="handleDelete" plain>批量删除</el-button>
        </el-form-item>
      </el-form>

      <!-- 员工列表 -->
      <el-table
        :data="empList"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column align="center" label="序号" width="50" type="index" />
        <el-table-column align="center" label="员工姓名" width="180" prop="ename" />
        <el-table-column align="center" label="出生日期" width="180">
          <template slot-scope="scope">
            {{toDateStr(scope.row.bdate)}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="性别" width="180">
          <template slot-scope="scope">
            {{ scope.row.sex == "M" ? "男" : "女" }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="所在城市" width="180" prop="city" />
        <el-table-column align="center" label="所在部门" width="180" prop="dname" />
        <el-table-column align="center" label="入职时间" width="180">
          <template slot-scope="scope">
            {{toDateStr(scope.row.startdate)}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="工资" width="180" prop="salary" />
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        align="center"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import empApi from "@/api/emp/emp";
import deptApi from "@/api/emp/dept";

export default {
  data() {
    return {
      empList: [],
      deptList: [],
      keyWords: {},
      pageNum: 1,
      pageSize: 5,
      total: 0,
      select: '',
      eids: [],
    };
  },

  created() {
    this.findAllDept();
    this.searchEmp();
  },

  //利用计算属性完成日期的格式化处理
  computed:{
    toDateStr(){
      return (dt) => {
        let mydate = new Date(dt)
        return mydate.getFullYear() + "年" + (mydate.getMonth()+1) + "月" + mydate.getDate() + "日"
      }
    }
  },

  methods: {
    handleSelectionChange(val) {
        this.eids = []
        for(let v of val) {
            this.eids.push(v.eid)
        }
    },
    handleDelete(row) {
        if(row.eid) {
            this.eids = [];
            this.eids.push(row.eid);
        }
      let _this = this;
      this.$confirm(`此操作将永久删除这些员工, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let _this = this;
        empApi.removeEmps(this.eids).then(resp => {
          this.$message({
            type: 'success',
            message: '删除成功!',
          });

          this.page = 1;
          this.searchEmp();
          this.eids = []
        })
        
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },

    findAllDept() {
      deptApi.findAllDept().then((resp) => {
        this.deptList = resp.data.list;
      });
    },

    searchEmp(pageNum) {
      if (pageNum) {
        this.pageNum = pageNum;
      }
      empApi.searchEmp(this.pageNum, this.pageSize, this.keyWords).then((resp) => {
        this.empList = resp.data.pageModel.records;
        this.total = resp.data.pageModel.total;
      });
    },

    addEmp() {
      this.$router.push("/emp/save");
    },

    //跳转修改
    handleEdit(index, row) {
      //   this.$router.push("/student/save/"+row.sid);
      this.$router.push("/emp/save?eid=" + row.eid);
    },

    handleSizeChange(val) {
      this.pageSize = val;
      this.searchEmp();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.searchEmp();
    },
  },
};
</script>

<style>
#app-body {
  /* text-align: center; */
}

.el-card .el-table {
  /* height: 800px */
}
</style>
